<template>
  <div class="discussion-container">
    <h1 class="discussion-title">讨论区</h1>
    <p class="course-name">课程名称: {{ course.name }}</p>
    <div class="search-container">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="搜索帖子和评论..."
        class="search-input"
      />
      <button @click="searchDiscussions" class="search-button">搜索</button>
    </div>

    <div class="discussions">
      <div
        v-for="discussion in discussions"
        :key="discussion.id"
        class="discussion-item"
        @click="viewDiscussionDetail(discussion.id)"
      >
        <h4 class="discussion-header">
          {{ discussion.user }} @ {{ discussion.date }}
        </h4>
        <p class="discussion-content">{{ discussion.content }}</p>
        <img
          v-if="discussion.image"
          :src="discussion.image"
          alt="讨论图片"
          class="discussion-image"
        />
      </div>
    </div>

    <div class="comment-section">
      <h2>发布帖子</h2>
      <!-- 标题输入框 -->
      <input
        type="text"
        v-model="newDiscussion.title"
        placeholder="输入帖子的标题..."
        class="discussion-title-input"
      />
      <textarea
        v-model="newDiscussion.content"
        placeholder="提出您的疑问或领悟..."
        class="discussion-textarea"
      ></textarea>
      <div class="input-container">
        <input
          type="file"
          @change="onImageChange"
          accept="image/*"
          class="file-input"
        />
        <button @click="submitDiscussion" class="submit-button">提交</button>
      </div>
    </div>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      courseId: null,
      course: {}, // 存放课程信息
      discussions: [], // 存放讨论内容的数组
      newDiscussion: {
        title: "", // 新增标题字段
        content: "",
        image: null
      },
      searchQuery: "" // 新增搜索查询的状态
    };
  },
  created() {
    this.courseId = this.$route.params.courseId; // 获取路由中的 courseId
    this.fetchCourseInfo(); // 获取课程信息
    this.fetchDiscussions(); // 获取讨论内容
  },
  methods: {
    async submitDiscussion() {
      // 检查是否有内容
      if (!this.newDiscussion.title || !this.newDiscussion.content) {
        alert("标题和讨论内容不能为空!");
        return;
      }

      // 创建一个符合后端接口的帖子对象
      const newPost = {
        courseId: this.courseId,
        title: this.newDiscussion.title, // 发送标题
        content: this.newDiscussion.content,
        imageUrl: this.newDiscussion.image || "", // 后端属性是 imageUrl
        studentId: "当前用户ID"  // 使用 studentId
      };

      try {
        // 发起 POST 请求，将数据发送到后端
        const response = await axios.post('http://localhost:8085/posts/create', newPost); // 修改为正确的 URL

        // 假设后端返回新创建的帖子对象，并将其添加到 discussions 中
        const post = response.data;

        this.discussions.push({
          id: post.postId,  // 后端返回的帖子 ID
          user: post.userId,  // 后端返回的用户 ID 或用户名
          title: post.title,  // 获取返回的标题
          content: post.content,
          image: post.image,
          date: new Date().toLocaleString()
        });

        // 重置讨论内容、标题和图片
        this.newDiscussion.title = "";
        this.newDiscussion.content = "";
        this.newDiscussion.image = null;
      } catch (error) {
        console.error("创建帖子失败:", error);
        alert("提交失败，请稍后再试！");
      }
    },

    async fetchCourseInfo() {
      // API 调用获取课程信息
    },

    async fetchDiscussions() {
      try {
        const response = await axios.get(`http://localhost:8085/posts/getPost/${this.courseId}`);
        this.discussions = response.data;
      } catch (error) {
        console.error("获取帖子失败:", error);
        this.discussions = []; // 如果没有数据，清空
      }
    },

    onImageChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = e => {
          this.newDiscussion.image = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },

    async searchDiscussions() {
      try {
        const response = await axios.get(
          `/posts/searchPost/${this.courseId}?query=${this.searchQuery}`
        );
        this.discussions = response.data;
      } catch (error) {
        console.error("搜索帖子失败:", error);
        alert("搜索失败，请稍后再试！");
      }
    },

    viewDiscussionDetail(discussionId) {
      this.$router.push({ name: "DiscussionDetail", params: { discussionId } });
    }
  }
};
</script>



<style scoped>
/* 新增样式：标题输入框 */
.discussion-title-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.discussion-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.discussion-title {
  text-align: center;
  color: #333;
}

.course-name {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-input {
  width: 70%;
  padding: 10px;
  border: 1px solid #007bff;
  border-radius: 5px 0 0 5px;
  outline: none;
  font-size: 14px;
}

.search-button {
  padding: 10px 15px;
  border: none;
  border-radius: 0 5px 5px 0;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #0056b3;
}

.discussions {
  margin-bottom: 20px;
}

.discussion-item {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  transition: box-shadow 0.3s;
}

.discussion-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.discussion-header {
  margin: 0 0 10px;
  font-size: 1.1em;
  color: #007bff;
}

.discussion-content {
  margin: 0 0 10px;
  line-height: 1.5;
}

.discussion-image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 5px;
}

.comment-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}

.input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.discussion-textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  font-size: 14px;
}

.file-input {
  margin-bottom: 10px;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #0b7ffb;
  border-radius: 5px;
  background-color: rgba(244, 245, 249, 0.719)
  }
</style>